<template>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '300px'">
            <el-scrollbar>
                <div class="logo-box">
                    <el-image :src="require('@/assets/logo.png')" fit="scale-down" :lazy="true"></el-image>
                    <span>网博商城后台管理系统</span>
                </div>
                <el-menu active-text-color="#ffd04b" :background-color="bgcolor" text-color="#fff"
                    :collapse="isCollapse" :collapse-transition="true" router :default-active="$route.path"
                >
                    <el-sub-menu v-for=" pm in menus " :key="pm.id" :index="String(pm.id)">
                        <template #title>
                            <el-icon>
                                <Component :is="menusIcon[pm.path]"></Component>
                            </el-icon>
                            <span>{{ pm.authName }}</span>
                        </template>
                        <el-menu-item v-for=" cm in pm.children" :key="cm.id" :index="`/home/${cm.path}`">
                        <!-- <el-menu-item v-for=" cm in pm.children" :key="cm.id" :route="{ name:cm.path }" :index="`/home/${cm.path}`"> -->
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>{{ cm.authName }}</span>
                            </template>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-scrollbar>
        </el-aside>
        <el-container>
            <el-header>
                <div>
                    <el-button size="default" link :icon="isCollapse ? 'Expand' : 'Fold'" @click="isCollapse = !isCollapse">
                    </el-button>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for=" (n,i) in $route.meta.navNames" :key="i">{{ n }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-dropdown>
                    <div class="user-drop">
                        <el-avatar :src="require('@/assets/user.png')" />
                        <span>{{ cuser.username }}</span>
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="outLogin()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-main>
                <RouterView class="home-body"></RouterView>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import _ from 'lodash'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from "vuex";
import rightsApi from "@/api/rights.js";
const router = useRouter();
let $store = useStore();
// #2d416c
let bgcolor = ref("#232f49");
let isCollapse = ref(false);

const outLogin = function () {
    router.push({
        name: "login"
    })
}

let cuser = ref({});
cuser.value = JSON.parse( sessionStorage.getItem("user") );

let menusIcon = ref({
    welcome:"HomeFilled",
    users:"Avatar",
    rights:"Tools",
    goods:"Grid",
    orders:"Histogram"
})
let menus = ref([])
const initMenus = async function(){
    let menuList = await rightsApi.loadLeftMenu();
    // console.log(menuList)
    let authNames = [];
    for (let pmenu of menuList) {
        for (let cmenu of pmenu.children) {
            authNames.push(cmenu.path)
        }
    }
    authNames.push("home")
    if(authNames.includes("goods")){
        authNames.push("goodsAdd")
    }
    $store.commit("setMenus",authNames)
    menus.value = menuList;
}
initMenus();

onMounted(()=>{
    window.addEventListener("resize",_.debounce(()=>{
        if(window.document.body.clientWidth<1000){
            isCollapse.value = true;
        }else{
            isCollapse.value = false;
        }
    }))
})

</script>

<style lang="scss" scoped>
$home-color: white;

.el-container {
    height: 100%;
    background-color: #dedede;
}

.el-aside {
    background-color: v-bind(bgcolor);
    color: $home-color;
    box-shadow: 2px 0 4px #999;
    transition: width 500ms ease;
}

.logo-box {
    height: 60px;
    width: 100%;
    background-color: #2d416c;
    box-shadow: 0px -2px 4px #999;
    overflow: hidden;
    white-space: nowrap;
    position: sticky;
    top: 0px;
    z-index: 99;

    .el-image,
    >span {
        height: 100%;
        padding: 0px 6px;
        vertical-align: middle;
    }

    .el-image {
        width: 50px;
    }

    >span {
        font-size: 20px;
    }
}

.el-menu {
    border: unset;
}

.el-header {
    background-color: $home-color;
    border: none;
    box-shadow: 0px 2px 4px #999;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;

    .el-button {
        font-size: 20px;
    }
}

.el-breadcrumb {
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
}

.user-drop {

    >.el-avatar,
    >span,
    >.el-icon {
        vertical-align: middle;
        padding-right: 10px;
    }

    >span {
        padding: 0px 6px;
    }
}

.el-dropdown {
    background-color: #2d416c;
    border-radius: 10000px;
    color: white;
}

.el-main {
    display: flex;
    flex-flow: column nowrap;
}

.home-body {
    height: 100%;
    box-sizing: border-box;
}
</style>